<template>
  <div class="stat-card" :class="`stat-${type}`">
    <div class="stat-icon">
      <i :class="icon"></i>
    </div>
    <div class="stat-infos">
      <div class="stat-label">{{ label }}</div>
      <div class="stat-value">{{ value }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    label: string;
    value: string | number;
    icon?: string;
    type?: "primary" | "success" | "warning" | "danger" | "info";
  }>(),
  {
    icon: "el-icon-info",
    type: "primary",
  }
);
</script>

<style scoped lang="scss">
.stat-card {
  flex: 1;
  min-width: 120px;
  padding: 15px;
  border-radius: 6px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;

  .stat-icon {
    font-size: 24px;
  }

  .stat-infos {
    flex: 1;

    .stat-label {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 5px;
    }

    .stat-value {
      font-size: 22px;
      font-weight: 600;
    }
  }
}

.stat-primary {
  background-color: #1890ff;
}

.stat-success {
  background-color: #52c41a;
}

.stat-warning {
  background-color: #faad14;
}

.stat-danger {
  background-color: #f5222d;
}

.stat-info {
  background-color: #8c8c8c;
}
</style>
